<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path: '/teacher/notices'}">教师</el-breadcrumb-item>
      <el-breadcrumb-item>过程文档评审</el-breadcrumb-item>
      <el-breadcrumb-item>毕业论文(终稿)评审</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域--> 
    <el-card>
      <el-table :data="paperFinalList" stripe style="width:1120">
        <el-table-column align="center" label="序号" width="80" type="index"></el-table-column>
        <el-table-column align="center" label="课题名称" width="300" prop="subject.name"></el-table-column>
        <el-table-column align="center" label="课题类型" width="100">
          <template slot-scope="scope"> 
            <el-tag type="info">{{scope.row.subject.type.label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="课题来源" width="100">
          <template slot-scope="scope"> 
            <el-tag>{{scope.row.subject.source.label}}</el-tag>
          </template>
        </el-table-column> 
        <el-table-column align="center" label="选题学生"  width="150">
          <template slot-scope="scope">
            <span>{{scope.row.student.name}} ({{scope.row.student.id}})</span>
          </template>
        </el-table-column> 
        <el-table-column align="center" label="当前状态" width="100">
          <template slot-scope="scope">
            <el-tag effect="dark" :type="statusObj[scope.row.doc.status].type">{{statusObj[scope.row.doc.status].label}}</el-tag>
          </template>
        </el-table-column>  
        <el-table-column align="center" label="预览/下载/审核/撤销" width="250"> 
          <template slot-scope="scope">
            <el-button type="info" circle icon="el-icon-view"
                       @click="filePreview(scope.row.doc.attachment)"  v-if="scope.row.doc.status !== 1">
            </el-button>
            <el-button type="primary" v-if="scope.row.doc.status !== 1" circle icon="el-icon-download" @click="downloadFile(scope.row.doc.attachment)">
            </el-button>
            <el-button type="warning" v-if="scope.row.doc.status === 2" circle icon="el-icon-check"
                       @click="dialogVisible = true; paperFinal = scope.row.doc">
            </el-button>
            <el-popover placement="top" width="250px" trigger="click" :content="scope.row.doc.reviewAdvice" style="margin:0 10px" v-if="scope.row.doc.status > 2">
              <el-button slot="reference" type="success" circle icon="el-icon-check"></el-button>
            </el-popover> 
            <el-button type="danger" v-if="scope.row.doc.status > 2" circle icon="el-icon-delete"
                       @click="cancelCheck(scope.row.doc.id)">
            </el-button> 
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 底部分页按钮 -->
      <el-pagination
        background style="margin-left:42%"
        :current-page.sync="pageParam.currentPage" 
        :page-size.sync="pageParam.pageSize"
        @current-change="nowPage"
        layout="prev, pager, next"
        :total="total">
      </el-pagination> 
    <!-- 审核文献综述对话框 -->
    <el-dialog title="审核毕业论文(初稿)" :visible.sync="dialogVisible" width="600px">
      <el-form ref="reviewFormRef" :rules="formRules" label-width="120px" :model="reviewParams">
        <el-form-item label="审核结果" prop="status">
          <el-select v-model="reviewParams.status" placeholder="请选择审核结果"> 
            <el-option :value="3" label="审核不通过"></el-option>
            <el-option :value="4" label="审核通过"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核意见" prop="reviewAdvice">
          <el-input v-model="reviewParams.reviewAdvice" type="textarea" :rows="5" style="width: 50%"></el-input>
          <el-button type="primary" style="margin-left: 15%; margin-top: 20px" 
            @click="reviewPaperFinal('reviewFormRef')">提交审核</el-button>
        </el-form-item>
      </el-form> 
    </el-dialog> 
  </div>
</template>

<script>
  import {getTeacherPaperFinalTotal, reviewPaperFinalById, getTeacherPaperFinalByPage, teacherCancelCheckPaperFinalById} from '../../axios/paper-final'
  export default {
    name: 'TeacherPaperFinalReview',
    data(){
      return {
        paperFinalList: [],
        baseUrl: 'http://view.xdocin.com/xdoc?_xdoc=',
        pageParam:{  currentPage: 1, pageSize: 5 },// 页码参数 
        total: 0,   
        dialogVisible: false, // 控制审核文献综述对话框的显示/隐藏  
        paperFinal:{}, 
        statusObj: {
          1: { type: 'info', label: '未提交' },
          2: { type: 'warning', label: '待审核' },
          3: { type: 'danger', label: '未通过' },
          4: { type: 'success', label: '已通过' }
        },
        formRules: {
          status: [ { required: true, message: '请选择审核结果', trigger: 'change' } ],
          reviewAdvice: [ { required: true, message: '请输入审核意见', trigger: 'blur' } ]
        },
        reviewParams:{  status: 4, reviewAdvice: '' }, 
      }
    },
    created(){
      this.getPaperFinalList() 
      this.getPaperFinalTotal()
    },
    methods: { 
      // 页码改变时，及时更新数据
      nowPage(page){
        this.pageParam.currentPage = page // 更新当前指向的页码
        this.getPaperFinalList()  
      },
      filePreview(url){ 
        const a = document.createElement("a")
        a.setAttribute("target", "_blank")
        a.setAttribute("href",this.baseUrl + url)
        a.click()
      },
      downloadFile(url){ 
        const a = document.createElement("a") 
        a.setAttribute("target", "_blank")
        a.setAttribute("href", url)
        a.click()
      }, 
      getPaperFinalTotal(){
        getTeacherPaperFinalTotal().then(res => {
          if(res.success){
            this.total = res.data 
          }
        })
      }, 
      getPaperFinalList(){ 
        // 发送后端请求，得到文献综述列表
        getTeacherPaperFinalByPage(this.pageParam).then(res => {
          if(res.success){
            this.paperFinalList = res.data 
          } 
        }) 
      },
      // 审核文献综述
      reviewPaperFinal(reviewFormRef){ 
        this.$refs[reviewFormRef].validate(valid =>{ 
          if(valid){ 
            this.$confirm('确认提交吗?', '系统提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then( () => {
              // 此时发送后端请求，保存审核信息
              this.paperFinal.reviewAdvice = this.reviewParams.reviewAdvice
              this.paperFinal.status = this.reviewParams.status 
              reviewPaperFinalById(this.paperFinal).then(res => {
                if(res.success){
                  this.$message.success('审核提交成功!')
                  this.dialogVisible = false
                  this.getPaperFinalList()
                } 
              }) 
            }).catch(() => {
              this.$message.info('已取消提交!')
            })
          }else{
            this.$message.error('请按要求填写各项信息!')
          }
        })
      },
      cancelCheck(id){
        this.$confirm('确认撤销审核吗?', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then( () => { 
          teacherCancelCheckPaperFinalById(id).then(res => {
            if(res.success){
              this.$message.success('撤销成功!') 
              this.getPaperFinalList()
            } 
          }) 
        }).catch(() => {
          this.$message.info('已取消提交!')
        })
      }, 
    }
  } 
</script> 